<template>
  <div id="app">
    <!-- 添加按钮 -->
    <div class="btnBox">
      <el-button type="primary">添加按钮</el-button>
    </div>
    <!-- 切换栏 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item
        @click="handleSelect(v)"
        :index="i + ''"
        v-for="(v, i) in navList"
        :key="i"
        >{{ v.name }}{{ v.count }}</el-menu-item
      >
    </el-menu>
    <!-- 表格 -->
    <el-table :data="tableData.list" border style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="商品ID" width="80"> </el-table-column>
      <el-table-column label="商品图" width="120">
        <!-- 图片懒加载 -->
        <template class="imgBox" slot-scope="scope">
          <el-image :src="scope.row.image">
            <div slot="error" class="image-slot">
              <img src="/img/索大.gif" alt="" />
            </div>
            <div slot="placeholder" class="image-slot">
              <img src="/img/Default.jpg" alt="" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="store_name" label="商品名称" width="100">
      </el-table-column>
      <el-table-column prop="price" label="商品售价" width="100">
      </el-table-column>
      <el-table-column prop="address" label="商品销量" width="150">
      </el-table-column>
      <el-table-column prop="stock" label="商品库存" width="80">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="80"> </el-table-column>
      <el-table-column prop="zip" label="状态" width="160">
        <!-- 是否上架 -->
        <template slot-scope="scope">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            @change="isShowFun(scope.row)"
            v-model="scope.row.is_show"
            active-text="上架"
            inactive-text="下架"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" size="small">查看评价</el-button>
          <el-button type="text" size="small">移到回收站</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @current-change="currentChangeFun"
      :page-size="3"
      :current-page="page"
      layout="prev, pager, next"
      :total="tableData.count"
    >
    </el-pagination>
  </div>
</template>
<script>
import { typeHeader, menusList, productList, isShow } from "@/api/request";
export default {
  data() {
    return {
      activeIndex: "0",
      navList: [],
      tableData: [],
      typeid: 0,
      page: 1,
      limit: 3,
    };
  },
  methods: {
    handleSelect(val) {
      //请求不同状态的数据
      this.typeid = val.type; //对状态进行全局存储
      this.page = 1;
      this.getJson();
    },
    // 分页
    currentChangeFun(page) {
      this.page = page; //存储页码
      this.getJson();
    },
    getJson() {
      //封装获取数据的函数
      productList({
        type: this.typeid,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data;
        console.log(this.tableData);
      });
    },
    // 是否上架
    isShowFun(val) {
      isShow({ id: val.id, is_show: val.is_show }).then((res) => {
        this.getJson();
        typeHeader().then((res) => {
          this.navList = res.data.list;
          // this.typeid = this.navList[0].type;//默认获取状态
          this.getJson();
        });
      });
    },
  },

  created() {
    // 检测登没登陆
    // 数据请求
    typeHeader().then((res) => {
      this.navList = res.data.list;
      this.typeid = this.navList[0].type; //默认获取状态
      this.getJson();
    });

    // menusList().then(res=>{
    //   console.log(res);
    // })
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 60px !important;
  height: 60px !important;
}
button {
  border-radius: 5px;
  border: none;
  color: white;
}
</style>
